/**
 * Theme System - Light / Dark / Dark-Modern
 * Sistema de temas unificado con 3 variantes
 *
 * @version 2.1.0
 */

/* ============================================
   TEMA CLARO (Light Theme) - DEFAULT
   ============================================ */
:root,
[data-theme="light"] {
  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --bg-hover: #f3f4f6;
  --bg-active: #e5e7eb;
  --bg-disabled: #f9fafb;
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* Text Colors */
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --text-disabled: #d1d5db;
  --text-inverse: #ffffff;
  --text-link: #667eea;
  --text-link-hover: #5568d3;

  /* Brand Colors */
  --brand-primary: #667eea;
  --brand-secondary: #764ba2;
  --brand-primary-dark: #5568d3;

  /* Border Colors */
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  --border-focus: #667eea;
  --border-error: #ef4444;

  /* Component Specific */
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-placeholder: #9ca3af;
  --input-focus-ring: rgba(102, 126, 234, 0.2);

  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  --modal-bg: #ffffff;
  --modal-backdrop: rgba(0, 0, 0, 0.6);

  --navbar-bg: #ffffff;
  --navbar-border: #e5e7eb;
  --navbar-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

  --sidebar-bg: #ffffff;
  --sidebar-border: #e5e7eb;
  --sidebar-hover: #f3f4f6;
  --sidebar-active: #ede9fe;

  --table-border: #e5e7eb;
  --table-header-bg: #f9fafb;
  --table-hover: #f9fafb;
  --table-striped: #f9fafb;

  /* Status bar color for mobile browsers */
  color-scheme: light;
}

/* ============================================
   TEMA OSCURO (Dark Theme) - Base Panel
   ============================================ */
[data-theme="dark"] {
  /* Backgrounds - Basado en panel */
  --bg-primary: #2C2C2C;
  --bg-secondary: #363636;
  --bg-tertiary: #454545;
  --bg-hover: #363636;
  --bg-active: #454545;
  --bg-disabled: #363636;
  --bg-overlay: rgba(44, 44, 44, 0.95);
  --bg-muted: #454545;
  --bg-accent: #3A3A3A;
  --bg-glass: rgba(58, 58, 58, 0.8);

  /* Text Colors - Basado en panel */
  --text-primary: #E4E4E4;
  --text-secondary: #CFCFCF;
  --text-tertiary: #A8A8A8;
  --text-disabled: #6A6A6A;
  --text-inverse: #2C2C2C;
  --text-link: #B39CD0;
  --text-link-hover: #A089C8;
  --text-high-contrast: #E4E4E4;

  /* Brand Colors - Lavender theme del panel */
  --brand-primary: #B39CD0;
  --brand-secondary: #D8BFD8;
  --brand-primary-dark: #A089C8;
  --brand-primary-light: #C9A8D9;

  /* Border Colors - Basado en panel */
  --border-primary: #454545;
  --border-secondary: #5A5A5A;
  --border-focus: #B39CD0;
  --border-error: #FFAAAA;
  --border-subtle: #454545;
  --border-medium: #5A5A5A;
  --border-strong: #6A6A6A;

  /* Component Specific */
  --input-bg: #363636;
  --input-border: #5A5A5A;
  --input-placeholder: #6A6A6A;
  --input-focus-ring: rgba(179, 156, 208, 0.2);

  --card-bg: #363636;
  --card-border: #454545;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

  --modal-bg: #363636;
  --modal-backdrop: rgba(44, 44, 44, 0.8);
  --modal-blur: blur(8px);

  --navbar-bg: #363636;
  --navbar-border: #454545;
  --navbar-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

  --sidebar-bg: #363636;
  --sidebar-border: #454545;
  --sidebar-hover: #454545;
  --sidebar-active: #3A3A3A;

  --table-border: #454545;
  --table-header-bg: #363636;
  --table-hover: #454545;
  --table-striped: #363636;

  /* Semantic Colors ajustados para tema lavender */
  --success-color: #A8DADC;
  --warning-color: #FFC1CC;
  --error-color: #FFAAAA;
  --info-color: #C7D2FE;

  /* Enhanced shadows para dark theme */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.6);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.7), 0 8px 10px -6px rgb(0 0 0 / 0.7);

  /* Status bar color for mobile browsers */
  color-scheme: dark;
}

/* ============================================
   TEMA OSCURO MODERNO (Dark-Modern) - Base Super Admin
   ============================================ */
[data-theme="dark-modern"] {
  /* Backgrounds - Basado en super admin */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-hover: #1e293b;
  --bg-active: #334155;
  --bg-disabled: #1e293b;
  --bg-overlay: rgba(15, 23, 42, 0.95);
  --bg-muted: #334155;
  --bg-accent: #1e293b;
  --bg-glass: rgba(30, 41, 59, 0.8);

  /* Text Colors - Basado en super admin */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --text-disabled: #64748b;
  --text-inverse: #0f172a;
  --text-link: #60a5fa;
  --text-link-hover: #93c5fd;
  --text-high-contrast: #f8fafc;

  /* Brand Colors - Blue theme del super admin */
  --brand-primary: #3b82f6;
  --brand-secondary: #60a5fa;
  --brand-primary-dark: #2563eb;
  --brand-primary-light: #60a5fa;

  /* Border Colors - Basado en super admin */
  --border-primary: #334155;
  --border-secondary: #475569;
  --border-focus: #3b82f6;
  --border-error: #f87171;
  --border-subtle: #334155;
  --border-medium: #475569;
  --border-strong: #64748b;

  /* Component Specific */
  --input-bg: #1e293b;
  --input-border: #475569;
  --input-placeholder: #64748b;
  --input-focus-ring: rgba(59, 130, 246, 0.2);

  --card-bg: #1e293b;
  --card-border: #334155;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

  --modal-bg: #1e293b;
  --modal-backdrop: rgba(15, 23, 42, 0.8);
  --modal-blur: blur(8px);

  --navbar-bg: #1e293b;
  --navbar-border: #334155;
  --navbar-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

  --sidebar-bg: #1e293b;
  --sidebar-border: #334155;
  --sidebar-hover: #334155;
  --sidebar-active: #312e81;

  --table-border: #334155;
  --table-header-bg: #1e293b;
  --table-hover: #334155;
  --table-striped: #1e293b;

  /* Semantic Colors estándar */
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  --info-color: #06b6d4;

  /* Enhanced shadows para dark modern theme */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);

  /* Status bar color for mobile browsers */
  color-scheme: dark;
}

/* ============================================
   TRANSICIONES SUAVES DE TEMA
   ============================================ */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition: 
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base) !important;
}

/* Deshabilitar transiciones durante el cambio de tema para evitar flash */
.theme-changing {
  transition: none !important;
}

.theme-changing *,
.theme-changing *::before,
.theme-changing *::after {
  transition: none !important;
}