:root {
  /* --- Brand & Primary (Blue) --- */
  --brand-50: #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-400: #60a5fa;
  --brand-500: #3b82f6;
  /* El color principal */
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-800: #1e40af;
  --brand-900: #1e3a8a;
  --brand-950: #172554;

  /* --- Neutrals (Superficies y Texto) --- */
  --ui-bg: #ffffff;
  /* Fondo principal */
  --ui-surface: #f8fafc;
  /* Cards, Sidebars */
  --ui-border: #e2e8f0;
  /* Divisores */

  --text-main: #0f172a;
  /* Títulos */
  --text-muted: #64748b;
  /* Descripciones */

  /* --- Feedback (Semántica) --- */
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;

  /* --- Radius & Shadows --- */
  --radius-md: 8px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* --- TEMA OSCURO (Mismos nombres, valores adaptados) --- */
[data-theme='dark'] {
  --brand-500: #60a5fa;
  --brand-600: #3b82f6;

  --ui-bg: #020617;
  --ui-surface: #1e293b;
  --ui-border: #334155;

  --text-main: #f8fafc;
  --text-muted: #94a3b8;

  /* Adjust shadows for dark mode if needed */
  --shadow-sm: 0 1px 2px 0 rgb(255 255 255 / 0.05);
}

/* --- TEMA CORPORATE (Navy/Slate) --- */
[data-theme='corporate'] {
  --brand-50: #f0f9ff;
  --brand-500: #0e7490;
  /* Cyan-700-ish */
  --brand-700: #155e75;

  --ui-bg: #f1f5f9;
  /* Slate-100 */
  --ui-surface: #ffffff;
  --ui-border: #cbd5e1;
  /* Slate-300 */

  --text-main: #0f172a;
  /* Slate-900 */
  --text-muted: #475569;
  /* Slate-600 */
}

/* Utility Classes using Tokens */
.bg-brand-500 {
  background-color: var(--brand-500) !important;
}

.text-brand-500 {
  color: var(--brand-500) !important;
}

.bg-ui {
  background-color: var(--ui-bg) !important;
}

.bg-surface {
  background-color: var(--ui-surface) !important;
}

.border-ui {
  border-color: var(--ui-border) !important;
}

.text-main {
  color: var(--text-main) !important;
}

.text-muted-theme {
  color: var(--text-muted) !important;
}

/* Components */
.nav-link-custom {
  color: var(--text-main);
  transition: all 0.2s ease;
}

.nav-link-custom:hover {
  color: var(--brand-500);
}

.nav-link-custom i {
  color: var(--brand-500);
}

/* Submenu items */
.nav-item-sub {
  background-color: var(--ui-bg) !important;
  border-left: 2px solid var(--ui-border);
}

.nav-item-sub .nav-link {
  color: var(--text-muted) !important;
}

.nav-item-sub .nav-link:hover {
  color: var(--brand-500) !important;
  background-color: var(--ui-surface);
}

/* Mobile specific overrides if needed */
#navbar-mobile .nav-link {
  color: #ffffff !important;
}

/* Desktop Sidebar Specific */
#leftSide .nav-link {
  color: var(--text-main);
}

#leftSide .nav-link:hover {
  background-color: var(--ui-bg);
  border-radius: var(--radius-md);
}

.whatsapp-media-img,
.whatsapp-media-video {
  max-width: 100%;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--ui-border);
}

.whatsapp-media-audio {
  width: 100%;
}

.whatsapp-audio-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.button-primary { 
  background-color: var(--brand-500); 
  color: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  border: none;
  padding: 0.5rem 1rem;
}

.button-primary:hover {
  background-color: var(--brand-700);
  color: #ffffff;
}

[data-theme="dark"] img.logo-mono {
  filter: brightness(0) invert(1);
}

.logo-dark {
  display: none;
}

[data-theme="dark"] .logo-light {
  display: none !important;
}

[data-theme="dark"] .logo-dark {
  display: inline-block !important;
}