/* Variables para Modo Claro (por defecto) */
:root {
  --bg-main: #f8fafc;         /* Fondo principal de la app */
  --bg-card: #ffffff;         /* Fondo de tarjetas, tablas y modales */
  --bg-sidebar: #ffffff;      /* Fondo del menú lateral */
  --border-color: #e2e8f0;    /* Bordes suaves */
  
  --text-main: #0f172a;       /* Títulos y texto principal */
  --text-muted: #64748b;      /* Texto secundario / subtítulos */
  
  /* Color Primario por defecto (Azul Vectaris) */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: #eff6ff;
  --primary-text: #1e40af;
}

/* Variables para Modo Oscuro */
[data-theme="dark"] {
  --bg-main: #0b1329;
  --bg-card: #111c38;
  --bg-sidebar: #0f172a;
  --border-color: #1e293b;
  
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  
  --primary-light: rgba(37, 99, 235, 0.15);
  --primary-text: #60a5fa;
}

/* Paletas de Color de Acento Personalizables */
[data-accent="emerald"] {
  --primary: #10b981;
  --primary-hover: #059669;
  --primary-light: #ecfdf5;
  --primary-text: #065f46;
}
[data-accent="emerald"][data-theme="dark"] {
  --primary-light: rgba(16, 185, 129, 0.15);
  --primary-text: #34d399;
}

[data-accent="purple"] {
  --primary: #8b5cf6;
  --primary-hover: #7c3aed;
  --primary-light: #f5f3ff;
  --primary-text: #5b21b6;
}
[data-accent="purple"][data-theme="dark"] {
  --primary-light: rgba(139, 92, 246, 0.15);
  --primary-text: #a78bfa;
}

/* Utilidades aplicadas */
body {
  background-color: var(--bg-main);
  color: var(--text-main);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.bg-card { background-color: var(--bg-card); }
.bg-sidebar { background-color: var(--bg-sidebar); }
.border-theme { border-color: var(--border-color); }
.text-main { color: var(--text-main); }
.text-muted { color: var(--text-muted); }

.bg-primary { background-color: var(--primary); }
.bg-primary:hover { background-color: var(--primary-hover); }
.bg-primary-light { background-color: var(--primary-light); }
.text-primary { color: var(--primary); }
.text-primary-custom { color: var(--primary-text); }