/* --- Variables CSS Globales --- */

/* Tema por defecto: Modern Blue */
:root {
    --primary-color: #667eea;
    --primary-hover-color: #5a67d8;
    --primary-light: #e6f3ff;
    --primary-rgb: 102, 126, 234;
    --secondary-color: #f093fb;
    --secondary-hover-color: #e879f9;
    --accent-color: #4fd1c7;
    --accent-hover-color: #38b2ac;
    --success-color: #68d391;
    --success-hover-color: #48bb78;
    --warning-color: #fbd38d;
    --warning-hover-color: #f6ad55;
    --danger-color: #fc8181;
    --danger-hover-color: #f56565;

    --header-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --header-text: #ffffff;
    --nav-button-bg: rgba(255, 255, 255, 0.15);
    --nav-button-hover-bg: rgba(255, 255, 255, 0.25);
    --nav-button-active-bg: rgba(255, 255, 255, 0.35);

    --body-bg: #f7fafc;
    --card-bg: #ffffff;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    --text-color: #2d3748;
    --text-secondary-color: #4a5568;
    --text-muted-color: #718096;
    --border-color: #e2e8f0;
    --input-bg: #ffffff;
    --input-border: #e2e8f0;
    --input-focus-border: var(--primary-color);
    --input-focus-shadow: rgba(102, 126, 234, 0.25);

    /* Calendar Variables para tipos de entrenamiento */
    --calendar-inactive-bg: #f1f5f9;
    --calendar-level-1: #dbeafe; /* Azul suave - Solo fuerza */
    --calendar-level-2: #fed7d7; /* Rosa suave - Mixto (fuerza + cardio) */
    --calendar-level-3: #c6f6d5; /* Verde suave - Solo cardio */

    --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", Helvetica, Arial, sans-serif;
    --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --border-radius-sm: 6px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 20px;
    --box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --box-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --box-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --box-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    --max-width: 1200px;
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* Variables globales adicionales */
    --card-background: var(--card-bg);
    --shadow-xs: var(--box-shadow-xs);
    --shadow-sm: var(--box-shadow-sm);
    --shadow-md: var(--box-shadow-md);
    --shadow-lg: var(--box-shadow-lg);
    --accent-gradient: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    --button-gradient: linear-gradient(135deg, var(--primary-color), var(--primary-hover-color));
    --button-text: var(--header-text);    --primary-text: #ffffff;
    --secondary-text: var(--text-color);
    --button-secondary-bg: rgba(255, 255, 255, 0.9);
    --button-secondary-text: var(--text-color);
    --button-secondary-hover-bg: rgba(255, 255, 255, 1);
    --button-secondary-hover-text: var(--primary-color);
    
    /* Delete button specific variables */
    --delete-button-color: #dc2626;
    --delete-button-bg: #fef2f2;
    --delete-button-border: #fecaca;
    --delete-button-hover-bg: #dc2626;
    --delete-button-hover-color: #ffffff;
      /* Modal specific variables */
    --modal-bg: var(--card-bg);
    --modal-text: var(--text-color);
    --modal-header-bg: var(--primary-color);
    --modal-header-text: #ffffff;
    
    /* Success/weight badge colors */
    --success-badge-bg: linear-gradient(to right, #f0fdf4, #dcfce7);
    --success-badge-color: #16a34a;
}

/* Tema Oscuro */
[data-theme="dark"] {
    --primary-color: #818cf8;
    --primary-hover-color: #6366f1;
    --primary-light: #312e81;
    --primary-rgb: 129, 140, 248;
    --secondary-color: #f472b6;
    --secondary-hover-color: #ec4899;
    --accent-color: #34d399;
    --accent-hover-color: #10b981;
    --success-color: #6ee7b7;
    --success-hover-color: #34d399;
    --warning-color: #fbbf24;
    --warning-hover-color: #f59e0b;
    --danger-color: #f87171;
    --danger-hover-color: #ef4444;

    --header-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    --header-text: #f8fafc;
    --nav-button-bg: rgba(248, 250, 252, 0.1);
    --nav-button-hover-bg: rgba(248, 250, 252, 0.2);
    --nav-button-active-bg: rgba(248, 250, 252, 0.3);

    --body-bg: #0f172a;
    --card-bg: #1e293b;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --text-color: #f8fafc;
    --text-secondary-color: #cbd5e1;
    --text-muted-color: #94a3b8;
    --border-color: #334155;
    --input-bg: #1e293b;
    --input-border: #334155;
    --input-focus-border: var(--primary-color);
    --input-focus-shadow: rgba(129, 140, 248, 0.25);
    
    /* Calendar Variables para tipos de entrenamiento - Tema oscuro */
    --calendar-inactive-bg: #334155;
    --calendar-level-1: #1e40af; /* Azul más oscuro - Solo fuerza */
    --calendar-level-2: #be185d; /* Rosa más oscuro - Mixto */
    --calendar-level-3: #059669; /* Verde más oscuro - Solo cardio */
    
    /* Variables adicionales específicas del tema */
    --card-background: var(--card-bg);
    --shadow-xs: var(--box-shadow-xs);
    --shadow-sm: var(--box-shadow-sm);
    --shadow-md: var(--box-shadow-md);
    --shadow-lg: var(--box-shadow-lg);
    --accent-gradient: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    --button-gradient: linear-gradient(135deg, var(--primary-color), var(--primary-hover-color));
    --button-text: var(--header-text);
    --primary-text: #ffffff;
    --secondary-text: var(--text-color);    --button-secondary-bg: rgba(248, 250, 252, 0.1);
    --button-secondary-text: var(--text-color);
    --button-secondary-hover-bg: rgba(248, 250, 252, 0.2);
    --button-secondary-hover-text: var(--primary-color);
    
    /* Delete button specific variables */
    --delete-button-color: #ef4444;
    --delete-button-bg: rgba(239, 68, 68, 0.1);
    --delete-button-border: rgba(239, 68, 68, 0.2);
    --delete-button-hover-bg: #ef4444;
    --delete-button-hover-color: #ffffff;
      /* Modal specific variables */
    --modal-bg: var(--card-bg);
    --modal-text: var(--text-color);
    --modal-header-bg: var(--primary-color);
    --modal-header-text: #ffffff;
    
    /* Success/weight badge colors for dark theme */
    --success-badge-bg: linear-gradient(to right, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
    --success-badge-color: #6ee7b7;
}

/* Tema Verde Natural */
[data-theme="nature"] {
    --primary-color: #059669;
    --primary-hover-color: #047857;
    --primary-light: #d1fae5;
    --primary-rgb: 5, 150, 105;
    --secondary-color: #d97706;
    --secondary-hover-color: #b45309;
    --accent-color: #0891b2;
    --accent-hover-color: #0e7490;
    --success-color: #10b981;
    --success-hover-color: #059669;
    --warning-color: #f59e0b;
    --warning-hover-color: #d97706;
    --danger-color: #dc2626;
    --danger-hover-color: #b91c1c;

    --header-gradient: linear-gradient(135deg, #064e3b 0%, #059669 100%);
    --header-text: #ffffff;
    --nav-button-bg: rgba(255, 255, 255, 0.15);
    --nav-button-hover-bg: rgba(255, 255, 255, 0.25);
    --nav-button-active-bg: rgba(255, 255, 255, 0.35);

    --body-bg: #f0fdf4;
    --card-bg: #ffffff;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    --text-color: #1f2937;
    --text-secondary-color: #374151;
    --text-muted-color: #6b7280;
    --border-color: #d1d5db;
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-focus-border: var(--primary-color);
    --input-focus-shadow: rgba(5, 150, 105, 0.25);

    /* Calendar Variables */
    --calendar-inactive-bg: #f0fdf4;
    --calendar-level-1: #dcfce7;
    --calendar-level-2: #86efac;
    --calendar-level-3: #22c55e;
    --calendar-level-4: #15803d;
    
    /* Variables adicionales específicas del tema */
    --card-background: var(--card-bg);
    --shadow-xs: var(--box-shadow-xs);
    --shadow-sm: var(--box-shadow-sm);
    --shadow-md: var(--box-shadow-md);
    --shadow-lg: var(--box-shadow-lg);
    --accent-gradient: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    --button-gradient: linear-gradient(135deg, var(--primary-color), var(--primary-hover-color));
    --button-text: var(--header-text);
    --primary-text: #ffffff;
    --secondary-text: var(--text-color);    --button-secondary-bg: rgba(255, 255, 255, 0.9);
    --button-secondary-text: var(--text-color);
    --button-secondary-hover-bg: rgba(255, 255, 255, 1);
    --button-secondary-hover-text: var(--primary-color);
    
    /* Delete button specific variables */
    --delete-button-color: #dc2626;
    --delete-button-bg: #fef2f2;
    --delete-button-border: #fecaca;
    --delete-button-hover-bg: #dc2626;
    --delete-button-hover-color: #ffffff;
      /* Modal specific variables */
    --modal-bg: var(--card-bg);
    --modal-text: var(--text-color);
    --modal-header-bg: var(--primary-color);
    --modal-header-text: #ffffff;
    
    /* Success/weight badge colors */
    --success-badge-bg: linear-gradient(to right, #f0fdf4, #dcfce7);
    --success-badge-color: #16a34a;
}

/* Tema Sunset */
[data-theme="sunset"] {
    --primary-color: #f59e0b;
    --primary-hover-color: #d97706;
    --primary-light: #fef3c7;
    --primary-rgb: 245, 158, 11;
    --secondary-color: #ef4444;
    --secondary-hover-color: #dc2626;
    --accent-color: #8b5cf6;
    --accent-hover-color: #7c3aed;
    --success-color: #10b981;
    --success-hover-color: #059669;
    --warning-color: #f59e0b;
    --warning-hover-color: #d97706;
    --danger-color: #ef4444;
    --danger-hover-color: #dc2626;

    --header-gradient: linear-gradient(135deg, #dc2626 0%, #f59e0b 100%);
    --header-text: #ffffff;
    --nav-button-bg: rgba(255, 255, 255, 0.15);
    --nav-button-hover-bg: rgba(255, 255, 255, 0.25);
    --nav-button-active-bg: rgba(255, 255, 255, 0.35);

    --body-bg: #fffbeb;
    --card-bg: #ffffff;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    --text-color: #1f2937;
    --text-secondary-color: #374151;
    --text-muted-color: #6b7280;
    --border-color: #e5e7eb;
    --input-bg: #ffffff;
    --input-border: #e5e7eb;
    --input-focus-border: var(--primary-color);
    --input-focus-shadow: rgba(245, 158, 11, 0.25);
    
    /* Calendar Variables para tipos de entrenamiento - Tema amanecer */
    --calendar-inactive-bg: #fef3c7;
    --calendar-level-1: #ddd6fe; /* Púrpura suave - Solo fuerza */
    --calendar-level-2: #fecaca; /* Rosa coral - Mixto */
    --calendar-level-3: #bbf7d0; /* Verde menta - Solo cardio */
    
    /* Variables adicionales específicas del tema */
    --card-background: var(--card-bg);
    --shadow-xs: var(--box-shadow-xs);
    --shadow-sm: var(--box-shadow-sm);
    --shadow-md: var(--box-shadow-md);
    --shadow-lg: var(--box-shadow-lg);
    --accent-gradient: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    --button-gradient: linear-gradient(135deg, var(--primary-color), var(--primary-hover-color));
    --button-text: var(--header-text);
    --primary-text: #ffffff;    --secondary-text: var(--text-color);
    --button-secondary-bg: rgba(255, 255, 255, 0.9);
    --button-secondary-text: var(--text-color);
    --button-secondary-hover-bg: rgba(255, 255, 255, 1);
    --button-secondary-hover-text: var(--primary-color);
    
    /* Delete button specific variables */
    --delete-button-color: #dc2626;
    --delete-button-bg: #fef2f2;
    --delete-button-border: #fecaca;
    --delete-button-hover-bg: #dc2626;
    --delete-button-hover-color: #ffffff;
      /* Modal specific variables */
    --modal-bg: var(--card-bg);
    --modal-text: var(--text-color);
    --modal-header-bg: var(--primary-color);
    --modal-header-text: #ffffff;
    
    /* Success/weight badge colors */
    --success-badge-bg: linear-gradient(to right, #fef3c7, #fed7aa);
    --success-badge-color: #ea580c;
}

/* Tema Ocean */
[data-theme="ocean"] {
    --primary-color: #0ea5e9;
    --primary-hover-color: #0284c7;
    --primary-light: #e0f2fe;
    --primary-rgb: 14, 165, 233;
    --secondary-color: #06b6d4;
    --secondary-hover-color: #0891b2;
    --accent-color: #3b82f6;
    --accent-hover-color: #2563eb;
    --success-color: #22d3ee;
    --success-hover-color: #06b6d4;
    --warning-color: #facc15;
    --warning-hover-color: #eab308;
    --danger-color: #f43f5e;
    --danger-hover-color: #e11d48;

    --header-gradient: linear-gradient(135deg, #0c4a6e 0%, #0ea5e9 100%);
    --header-text: #ffffff;
    --nav-button-bg: rgba(255, 255, 255, 0.15);
    --nav-button-hover-bg: rgba(255, 255, 255, 0.25);
    --nav-button-active-bg: rgba(255, 255, 255, 0.35);

    --body-bg: #f0f9ff;
    --card-bg: #ffffff;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    --text-color: #0f172a;
    --text-secondary-color: #334155;
    --text-muted-color: #64748b;
    --border-color: #cbd5e1;
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --input-focus-border: var(--primary-color);
    --input-focus-shadow: rgba(14, 165, 233, 0.25);
    
    /* Calendar Variables */
    --calendar-inactive-bg: #e0f2fe;
    --calendar-level-1: #bae6fd;
    --calendar-level-2: #7dd3fc;
    --calendar-level-3: #0ea5e9;
    --calendar-level-4: #0284c7;
    
    /* Variables adicionales específicas del tema */
    --card-background: var(--card-bg);
    --shadow-xs: var(--box-shadow-xs);
    --shadow-sm: var(--box-shadow-sm);
    --shadow-md: var(--box-shadow-md);
    --shadow-lg: var(--box-shadow-lg);
    --accent-gradient: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    --button-gradient: linear-gradient(135deg, var(--primary-color), var(--primary-hover-color));
    --button-text: var(--header-text);
    --primary-text: #ffffff;
    --secondary-text: var(--text-color);    --button-secondary-bg: rgba(255, 255, 255, 0.9);
    --button-secondary-text: var(--text-color);
    --button-secondary-hover-bg: rgba(255, 255, 255, 1);
    --button-secondary-hover-text: var(--primary-color);
    
    /* Delete button specific variables */
    --delete-button-color: #dc2626;
    --delete-button-bg: #fef2f2;
    --delete-button-border: #fecaca;
    --delete-button-hover-bg: #dc2626;
    --delete-button-hover-color: #ffffff;
      /* Modal specific variables */
    --modal-bg: var(--card-bg);
    --modal-text: var(--text-color);
    --modal-header-bg: var(--primary-color);
    --modal-header-text: #ffffff;
    
    /* Success/weight badge colors */
    --success-badge-bg: linear-gradient(to right, #e0f2fe, #bae6fd);
    --success-badge-color: #0284c7;
}