:root {
  color-scheme: dark; /* Asegura que elementos nativos (desplegables) usen tema oscuro */
  /* Paleta de colores refinada (Deep Space) */
  --bg-color: #05050a;
  --surface-main: rgba(18, 18, 35, 0.7);
  --surface-accent: rgba(30, 30, 50, 0.8);
  --surface-card: rgba(23, 23, 42, 0.6);

  --primary-color: #8b5cf6;
  --primary-glow: rgba(139, 92, 246, 0.4);
  --secondary-color: #3b82f6;
  --accent-color: #06b6d4;

  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border-color: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(139, 92, 246, 0.3);

  /* Gradientes */
  --grad-primary: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);
  --grad-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);

  /* Efectos */
  --glass-blur: blur(16px);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.15);

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}