/* ═══════════════════════════════════════════════════════
   EVOQIA DESIGN SYSTEM — CORE TOKENS
   v1.0 · Febrero 2026
   ═══════════════════════════════════════════════════════ */
:root {
  /* ── Backgrounds ── */
  --ev-bg-base: #080b13;
  --ev-bg-raised: #0e1220;
  --ev-bg-surface: #141b2d;
  --ev-bg-overlay: #1a2238;
  --ev-bg-hover: rgba(255, 255, 255, 0.04);
  --ev-bg-active: rgba(255, 255, 255, 0.06);

  /* ── Borders ── */
  --ev-border-subtle: rgba(255, 255, 255, 0.06);
  --ev-border-default: rgba(255, 255, 255, 0.1);
  --ev-border-strong: rgba(255, 255, 255, 0.16);

  /* ── Text ── */
  --ev-text-primary: #f1f5f9;
  --ev-text-secondary: #94a3b8;
  --ev-text-muted: #475569;
  --ev-text-disabled: #334155;

  /* ── Brand ── */
  --ev-brand-primary: #3b82f6;
  --ev-brand-secondary: #2563eb;
  --ev-brand-light: #60a5fa;
  --ev-brand-dark: #2563eb;
  --ev-brand-glow: rgba(59, 130, 246, 0.15);
  --ev-brand-subtle: rgba(59, 130, 246, 0.08);

  /* ── Semantic Colors ── */
  --ev-success: #10b981;
  --ev-success-subtle: rgba(16, 185, 129, 0.1);
  --ev-success-muted: rgba(16, 185, 129, 0.06);

  --ev-warning: #f59e0b;
  --ev-warning-subtle: rgba(245, 158, 11, 0.12);
  --ev-warning-muted: rgba(245, 158, 11, 0.06);

  --ev-danger: #f43f5e;
  --ev-danger-subtle: rgba(244, 63, 94, 0.12);
  --ev-danger-muted: rgba(244, 63, 94, 0.06);

  --ev-info: #06b6d4;
  --ev-info-subtle: rgba(6, 182, 212, 0.12);

  /* ── Channel Colors ── */
  --ev-channel-ml: #ffe600;
  --ev-channel-ml-bg: rgba(255, 230, 0, 0.1);
  --ev-channel-tn: #00b4d8;
  --ev-channel-tn-bg: rgba(0, 180, 216, 0.1);
  --ev-channel-pv: #f97316;
  --ev-channel-pv-bg: rgba(249, 115, 22, 0.1);
  --ev-channel-web: #8b5cf6;
  --ev-channel-web-bg: rgba(139, 92, 246, 0.1);
  --ev-channel-fq: #6366f1;
  --ev-channel-fq-bg: rgba(99, 102, 241, 0.1);

  /* ── Spacing Scale (4px base) ── */
  --ev-space-1: 4px;
  --ev-space-2: 8px;
  --ev-space-3: 12px;
  --ev-space-4: 16px;
  --ev-space-5: 20px;
  --ev-space-6: 24px;
  --ev-space-8: 32px;
  --ev-space-10: 40px;
  --ev-space-12: 48px;
  --ev-space-16: 64px;

  /* ── Border Radius ── */
  --ev-radius-sm: 6px;
  --ev-radius-md: 10px;
  --ev-radius-lg: 14px;
  --ev-radius-xl: 18px;
  --ev-radius-full: 9999px;

  /* ── Shadows ── */
  --ev-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --ev-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --ev-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.45);
  --ev-shadow-glow-brand: 0 0 20px rgba(59, 130, 246, 0.15);
  --ev-shadow-glow-danger: 0 0 20px rgba(244, 63, 94, 0.12);

  /* ── Typography ── */
  --ev-font-ui: "DM Sans", system-ui, sans-serif;
  --ev-font-mono: "JetBrains Mono", "Fira Code", monospace;
  --ev-font-display: "Instrument Serif", Georgia, serif;

  /* ── Transitions ── */
  --ev-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ev-duration-fast: 120ms;
  --ev-duration-normal: 200ms;
  --ev-duration-slow: 350ms;

  /* ── Footer Specific ── */
  --ev-footer-bg: var(--ev-bg-surface);
  --ev-footer-border: var(--ev-border-default);
  --ev-footer-text: #94a3b8;
  --ev-footer-text-strong: var(--ev-text-primary);
  --ev-footer-link: var(--ev-text-primary);
  --ev-footer-link-hover: #ffffff;
  --ev-footer-link-bg-hover: rgba(255, 255, 255, 0.1);

  /* ── Modal Specific ── */
  --ev-modal-backdrop: rgba(0, 0, 0, 0.75);
  --ev-modal-content-bg: var(--ev-bg-surface);
  --ev-modal-content-border: var(--ev-border-default);
  --ev-modal-header-bg: var(--ev-bg-raised);
  --ev-modal-header-border: var(--ev-border-subtle);
  --ev-modal-body-bg: var(--ev-bg-surface);
  --ev-modal-footer-bg: var(--ev-bg-raised);
  --ev-modal-footer-border: var(--ev-border-subtle);
  --ev-modal-shadow: var(--ev-shadow-lg);

  /* ── Search Input Specific ── */
  --ev-search-bg: var(--ev-bg-raised);
  --ev-search-border: var(--ev-border-default);
  --ev-search-text: var(--ev-text-primary);
  --ev-search-placeholder: var(--ev-text-muted);
  --ev-search-icon-bg: transparent;
  --ev-search-icon-color: var(--ev-text-secondary);
  --ev-search-focus-border: var(--ev-brand-primary);
  --ev-search-focus-glow: var(--ev-brand-glow);
}

/* ═══════════════════════════════════════════════════════
   SMOOTH THEME TRANSITIONS
   Transiciones suaves al cambiar entre dark/light mode
   ═══════════════════════════════════════════════════════ */

html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Transiciones para elementos comunes */
.card,
.modal-content,
.btn,
.form-control,
.form-select,
.table,
.nav,
.sidebar,
.header,
.footer {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.2s ease;
}

/* ═══════════════════════════════════════════════════════
   LIGHT MODE THEME
   Soporta white mode para el futuro
   ═══════════════════════════════════════════════════════ */
[data-theme="light"],
.light-mode {
  /* ── Backgrounds ── */
  --ev-bg-base: #f8fafc;
  --ev-bg-raised: #ffffff;
  --ev-bg-surface: #ffffff;
  --ev-bg-overlay: #f1f5f9;
  --ev-bg-hover: rgba(0, 0, 0, 0.04);
  --ev-bg-active: rgba(0, 0, 0, 0.06);

  /* ── Borders ── */
  --ev-border-subtle: rgba(0, 0, 0, 0.06);
  --ev-border-default: rgba(0, 0, 0, 0.1);
  --ev-border-strong: rgba(0, 0, 0, 0.16);

  /* ── Text ── */
  --ev-text-primary: #1e293b;
  --ev-text-secondary: #475569;
  --ev-text-muted: #94a3b8;
  --ev-text-disabled: #cbd5e1;

  /* ── Brand ── (mantiene los mismos colores) */
  --ev-brand-primary: #3b82f6;
  --ev-brand-secondary: #2563eb;
  --ev-brand-light: #60a5fa;
  --ev-brand-dark: #2563eb;
  --ev-brand-glow: rgba(59, 130, 246, 0.15);
  --ev-brand-subtle: rgba(59, 130, 246, 0.08);

  /* ── Semantic Colors ── (mantiene los mismos) */
  --ev-success: #10b981;
  --ev-success-subtle: rgba(16, 185, 129, 0.1);
  --ev-success-muted: rgba(16, 185, 129, 0.06);

  --ev-warning: #f59e0b;
  --ev-warning-subtle: rgba(245, 158, 11, 0.12);
  --ev-warning-muted: rgba(245, 158, 11, 0.06);

  --ev-danger: #f43f5e;
  --ev-danger-subtle: rgba(244, 63, 94, 0.12);
  --ev-danger-muted: rgba(244, 63, 94, 0.06);

  --ev-info: #06b6d4;
  --ev-info-subtle: rgba(6, 182, 212, 0.12);

  /* ── Channel Colors ── (mantiene los mismos) */
  --ev-channel-ml: #ffe600;
  --ev-channel-ml-bg: rgba(255, 230, 0, 0.1);
  --ev-channel-tn: #00b4d8;
  --ev-channel-tn-bg: rgba(0, 180, 216, 0.1);
  --ev-channel-pv: #f97316;
  --ev-channel-pv-bg: rgba(249, 115, 22, 0.1);
  --ev-channel-web: #8b5cf6;
  --ev-channel-web-bg: rgba(139, 92, 246, 0.1);
  --ev-channel-fq: #6366f1;
  --ev-channel-fq-bg: rgba(99, 102, 241, 0.1);

  /* ── Shadows ── (ajustadas para light mode) */
  --ev-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --ev-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --ev-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
  --ev-shadow-glow-brand: 0 0 20px rgba(59, 130, 246, 0.2);
  --ev-shadow-glow-danger: 0 0 20px rgba(244, 63, 94, 0.15);

  /* ── Footer Specific ── */
  --ev-footer-bg: var(--ev-bg-surface);
  --ev-footer-border: var(--ev-border-default);
  --ev-footer-text: #64748b;
  --ev-footer-text-strong: var(--ev-text-primary);
  --ev-footer-link: var(--ev-text-primary);
  --ev-footer-link-hover: #000000;
  --ev-footer-link-bg-hover: rgba(0, 0, 0, 0.05);

  /* ── Modal Specific ── */
  --ev-modal-backdrop: rgba(0, 0, 0, 0.5);
  --ev-modal-content-bg: var(--ev-bg-surface);
  --ev-modal-content-border: var(--ev-border-default);
  --ev-modal-header-bg: var(--ev-bg-surface);
  --ev-modal-header-border: var(--ev-border-default);
  --ev-modal-body-bg: var(--ev-bg-surface);
  --ev-modal-footer-bg: var(--ev-bg-raised);
  --ev-modal-footer-border: var(--ev-border-default);
  --ev-modal-shadow: var(--ev-shadow-lg);

  /* ── Search Input Specific ── */
  --ev-search-bg: var(--ev-bg-surface);
  --ev-search-border: var(--ev-border-default);
  --ev-search-text: var(--ev-text-primary);
  --ev-search-placeholder: var(--ev-text-muted);
  --ev-search-icon-bg: transparent;
  --ev-search-icon-color: var(--ev-text-secondary);
  --ev-search-focus-border: var(--ev-brand-primary);
  --ev-search-focus-glow: var(--ev-brand-glow);
}

/* ═══════════════════════════════════════════════════════
   SMOOTH THEME TRANSITIONS
   Transiciones suaves al cambiar entre dark/light mode
   ═══════════════════════════════════════════════════════ */

html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Transiciones para elementos comunes */
.card,
.modal-content,
.btn,
.form-control,
.form-select,
.table,
.nav,
.sidebar,
.header,
.footer {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.2s ease;
}