/**
 * PALETA DE COLORES OPTIMIZADA PARA PANTALLAS
 * EntrenameAPP - Sistema de Variables CSS
 * Optimizado para: YouTube, Móvil, Desktop, Accesibilidad WCAG AAA
 * VERSIÓN 2.0 - ALTO CONTRASTE
 */

:root {
    /* ========================================
       COLORES PRINCIPALES - Azul (MÁS SATURADOS)
       ======================================== */
    --primary-900: #1e3a8a;      /* Azul muy oscuro */
    --primary-800: #1e40af;      /* Azul oscuro */
    --primary-700: #2563eb;      /* Azul profundo (Principal) ⭐ */
    --primary-600: #3b82f6;      /* Azul medio */
    --primary-500: #60a5fa;      /* Azul claro */
    --primary-400: #93c5fd;      /* Azul muy claro */
    --primary-300: #bfdbfe;      /* Azul pastel */
    --primary-200: #dbeafe;      /* Azul ultra claro */
    --primary-100: #eff6ff;      /* Azul casi blanco */
    
    /* ========================================
       COLORES SECUNDARIOS - Púrpura/Violeta
       ======================================== */
    --secondary-900: #4c1d95;    /* Púrpura muy oscuro */
    --secondary-800: #5b21b6;    /* Púrpura oscuro */
    --secondary-700: #7c3aed;    /* Púrpura profundo (Secundario) ⭐ */
    --secondary-600: #8b5cf6;    /* Púrpura medio */
    --secondary-500: #a78bfa;    /* Púrpura claro */
    --secondary-400: #c4b5fd;    /* Púrpura muy claro */
    --secondary-300: #ddd6fe;    /* Púrpura pastel */
    --secondary-200: #ede9fe;    /* Púrpura ultra claro */
    --secondary-100: #f5f3ff;    /* Púrpura casi blanco */
    
    /* ========================================
       COLORES FUNCIONALES - Semánticos
       ======================================== */
    /* Verde - Éxito, Confirmaciones */
    --success-900: #14532d;
    --success-800: #166534;
    --success-700: #15803d;
    --success-600: #16a34a;
    --success-500: #22c55e;      /* ⭐ Principal */
    --success-400: #4ade80;
    --success-300: #86efac;
    --success-200: #bbf7d0;
    --success-100: #dcfce7;
    
    /* Amarillo/Naranja - Advertencias */
    --warning-900: #78350f;
    --warning-800: #92400e;
    --warning-700: #b45309;
    --warning-600: #d97706;
    --warning-500: #f59e0b;      /* ⭐ Principal */
    --warning-400: #fbbf24;
    --warning-300: #fcd34d;
    --warning-200: #fde68a;
    --warning-100: #fef3c7;
    
    /* Rojo - Errores, Peligro */
    --danger-900: #7f1d1d;
    --danger-800: #991b1b;
    --danger-700: #b91c1c;
    --danger-600: #dc2626;
    --danger-500: #ef4444;       /* ⭐ Principal */
    --danger-400: #f87171;
    --danger-300: #fca5a5;
    --danger-200: #fecaca;
    --danger-100: #fee2e2;
    
    /* Azul Claro - Información */
    --info-900: #0c4a6e;
    --info-800: #075985;
    --info-700: #0369a1;
    --info-600: #0284c7;
    --info-500: #0ea5e9;         /* ⭐ Principal */
    --info-400: #38bdf8;
    --info-300: #7dd3fc;
    --info-200: #bae6fd;
    --info-100: #e0f2fe;
    
    /* ========================================
       ESCALAS DE GRISES - FONDOS CLAROS
       ======================================== */
    --gray-900: #1f2937;         /* Casi negro - SOLO para texto importante */
    --gray-800: #374151;         /* Gris muy oscuro ⭐ Títulos */
    --gray-700: #4b5563;         /* Gris oscuro ⭐ Texto normal */
    --gray-600: #6b7280;         /* Gris medio ⭐ Texto secundario */
    --gray-500: #9ca3af;         /* Gris medio claro */
    --gray-400: #d1d5db;         /* Gris claro ⭐ Bordes activos */
    --gray-300: #e5e7eb;         /* Gris muy claro - Bordes */
    --gray-200: #f3f4f6;         /* Gris ultra claro - Cards */
    --gray-100: #f9fafb;         /* Casi blanco - Fondos */
    --gray-50:  #ffffff;         /* Blanco puro */
    
    /* ========================================
       COLORES DE TEXTO - Jerarquía (ALTO CONTRASTE)
       ======================================== */
    --text-primary:    #1f2937;    /* Títulos principales - Negro suave */
    --text-secondary:  #374151;    /* Texto normal - Gris oscuro */
    --text-tertiary:   #4b5563;    /* Texto secundario */
    --text-muted:      #6b7280;    /* Texto deshabilitado */
    --text-disabled:   #9ca3af;    /* Deshabilitado claro */
    --text-inverse:    #ffffff;    /* Texto sobre fondos oscuros */
    
    /* ========================================
       COLORES DE FONDO - SIEMPRE CLAROS
       ======================================== */
    --bg-primary:      #ffffff;            /* Fondo principal - BLANCO */
    --bg-secondary:    #f9fafb;            /* Fondo secundario - Gris muy claro */
    --bg-tertiary:     #f3f4f6;            /* Fondo terciario */
    --bg-elevated:     #ffffff;            /* Cards elevadas */
    --bg-card:         #ffffff;            /* Tarjetas */
    --bg-hover:        #f3f4f6;            /* Hover en elementos */
    --bg-active:       #e5e7eb;            /* Estado activo */
    --bg-overlay:      rgba(0, 0, 0, 0.5); /* Overlays/Modales */
    
    /* ELIMINAR FONDOS OSCUROS - usar estas alternativas */
    --bg-dark:         #f3f4f6;            /* Antes era oscuro, ahora claro */
    --bg-dark-alt:     #e5e7eb;            /* Alternativa clara */
    
    /* ========================================
       BORDES Y DIVISORES
       ======================================== */
    --border-light:    #e5e7eb;    /* Bordes suaves */
    --border-medium:   #d1d5db;    /* Bordes normales */
    --border-strong:   #9ca3af;    /* Bordes destacados */
    --border-focus:    var(--primary-600); /* Bordes en focus */
    
    /* ========================================
       SOMBRAS - Profundidad SUAVE
       ======================================== */
    --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.04);
    
    /* Sombras de color para elementos destacados */
    --shadow-primary:   0 8px 25px rgba(37, 99, 235, 0.25);
    --shadow-secondary: 0 8px 25px rgba(124, 58, 237, 0.25);
    --shadow-success:   0 8px 25px rgba(34, 197, 94, 0.25);
    --shadow-warning:   0 8px 25px rgba(245, 158, 11, 0.25);
    --shadow-danger:    0 8px 25px rgba(239, 68, 68, 0.25);
    
    /* ========================================
       GRADIENTES - COLORES VIBRANTES CON CONTRASTE
       ======================================== */
    --gradient-primary:    linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --gradient-primary-hover: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
    --gradient-success:    linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    --gradient-warning:    linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    --gradient-cool:       linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    --gradient-warm:       linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    /* ELIMINADO: gradient-dark - usar gradient-primary en su lugar */
    
    /* ========================================
       TAMAÑOS Y ESPACIADO
       ======================================== */
    --spacing-xs:  0.25rem;  /* 4px */
    --spacing-sm:  0.5rem;   /* 8px */
    --spacing-md:  1rem;     /* 16px */
    --spacing-lg:  1.5rem;   /* 24px */
    --spacing-xl:  2rem;     /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
    
    /* ========================================
       BORDER RADIUS
       ======================================== */
    --radius-sm:  0.375rem;  /* 6px */
    --radius-md:  0.5rem;    /* 8px */
    --radius-lg:  0.75rem;   /* 12px */
    --radius-xl:  1rem;      /* 16px */
    --radius-2xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;   /* Completamente redondo */
    
    /* ========================================
       TIPOGRAFÍA
       ======================================== */
    --font-size-xs:   0.75rem;   /* 12px */
    --font-size-sm:   0.875rem;  /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg:   1.125rem;  /* 18px */
    --font-size-xl:   1.25rem;   /* 20px */
    --font-size-2xl:  1.5rem;    /* 24px */
    --font-size-3xl:  1.875rem;  /* 30px */
    --font-size-4xl:  2.25rem;   /* 36px */
    --font-size-5xl:  3rem;      /* 48px */
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* ========================================
       TRANSICIONES
       ======================================== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    
    /* ========================================
       Z-INDEX - Capas de elevación
       ======================================== */
    --z-dropdown:  1000;
    --z-sticky:    1020;
    --z-fixed:     1030;
    --z-modal-backdrop: 1040;
    --z-modal:     1050;
    --z-popover:   1060;
    --z-tooltip:   1070;
}

/* ========================================
   RESET DE FONDOS OSCUROS - FORZAR FONDOS CLAROS
   ======================================== */
body {
    background-color: #f9fafb !important;
    color: #1f2937 !important;
}

/* Forzar fondos claros en elementos comunes */
.card, .panel, .box, .container-box, .content-box,
.modal-content, .dropdown-menu, .popup {
    background-color: #ffffff !important;
    color: #1f2937 !important;
}

/* ========================================
   CLASES UTILITARIAS - Colores de Fondo
   ======================================== */
.bg-primary { background-color: var(--primary-600) !important; color: white !important; }
.bg-primary-light { background-color: var(--primary-100) !important; color: var(--primary-800) !important; }
.bg-secondary { background-color: var(--secondary-600) !important; color: white !important; }
.bg-success { background-color: var(--success-500) !important; color: white !important; }
.bg-warning { background-color: var(--warning-500) !important; color: #1f2937 !important; }
.bg-danger { background-color: var(--danger-500) !important; color: white !important; }
.bg-info { background-color: var(--info-500) !important; color: white !important; }
.bg-white { background-color: #ffffff !important; color: #1f2937 !important; }
.bg-light { background-color: #f9fafb !important; color: #1f2937 !important; }
.bg-gray-50 { background-color: var(--gray-100) !important; color: #1f2937 !important; }
.bg-gray-100 { background-color: var(--gray-200) !important; color: #1f2937 !important; }

/* ELIMINAR FONDOS OSCUROS */
.bg-dark { background-color: #f3f4f6 !important; color: #1f2937 !important; }

/* Gradientes con buen contraste */
.bg-gradient-primary { background: var(--gradient-primary) !important; color: white !important; }
.bg-gradient-success { background: var(--gradient-success) !important; color: white !important; }
.bg-gradient-warning { background: var(--gradient-warning) !important; color: #1f2937 !important; }

/* ========================================
   CLASES UTILITARIAS - Colores de Texto
   ======================================== */
.text-primary { color: var(--primary-700) !important; }
.text-primary-700 { color: var(--primary-700) !important; }
.text-secondary { color: var(--secondary-700) !important; }
.text-secondary-700 { color: var(--secondary-700) !important; }
.text-success { color: var(--success-600) !important; }
.text-warning { color: var(--warning-700) !important; }
.text-danger { color: var(--danger-600) !important; }
.text-info { color: var(--info-700) !important; }
.text-dark { color: #1f2937 !important; }
.text-muted { color: #6b7280 !important; }
.text-gray-600 { color: var(--gray-700) !important; }
.text-gray-700 { color: var(--gray-800) !important; }
.text-gray-800 { color: var(--gray-900) !important; }
.text-white { color: #ffffff !important; }

/* ========================================
   CLASES UTILITARIAS - Bordes
   ======================================== */
.border-primary { border-color: var(--primary-600) !important; }
.border-secondary { border-color: var(--secondary-600) !important; }
.border-success { border-color: var(--success-500) !important; }
.border-warning { border-color: var(--warning-500) !important; }
.border-danger { border-color: var(--danger-500) !important; }
.border-gray-200 { border-color: var(--border-light) !important; }
.border-gray-300 { border-color: var(--border-medium) !important; }

/* ========================================
   CLASES UTILITARIAS - Sombras
   ======================================== */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-primary { box-shadow: var(--shadow-primary) !important; }
.shadow-success { box-shadow: var(--shadow-success) !important; }

/* ========================================
   NAVEGACIÓN - SIEMPRE CON BUEN CONTRASTE
   ======================================== */
.navigation, .navbar, .nav-header, header {
    background: var(--gradient-primary) !important;
    color: white !important;
}

.navigation a, .navbar a, .nav-link {
    color: white !important;
}

.navigation a:hover, .navbar a:hover, .nav-link:hover {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ========================================
   TARJETAS Y CONTENEDORES - FONDOS CLAROS
   ======================================== */
.stat-card, .info-card, .feature-card {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #e5e7eb;
}

.stat-card .stat-value,
.info-card .value {
    color: var(--primary-700) !important;
}

.stat-card .stat-label,
.info-card .label {
    color: #4b5563 !important;
}

/* ========================================
   BOTONES - ALTO CONTRASTE
   ======================================== */
.btn-primary, .btn-main {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
}

.btn-secondary {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    border: 1px solid #d1d5db !important;
}

.btn-success {
    background: var(--gradient-success) !important;
    color: white !important;
}

.btn-warning {
    background-color: var(--warning-500) !important;
    color: #1f2937 !important;
}

.btn-danger {
    background-color: var(--danger-500) !important;
    color: white !important;
}

/* ========================================
   FORMULARIOS - FONDOS CLAROS
   ======================================== */
input, textarea, select {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 2px solid #d1d5db !important;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--primary-600) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

input::placeholder, textarea::placeholder {
    color: #9ca3af !important;
}

/* ========================================
   TABLAS - ALTO CONTRASTE
   ======================================== */
table {
    background-color: #ffffff !important;
}

th {
    background-color: var(--primary-600) !important;
    color: white !important;
}

td {
    color: #1f2937 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

tr:hover td {
    background-color: #f9fafb !important;
}

/* ========================================
   ALERTAS Y NOTIFICACIONES
   ======================================== */
.alert-success {
    background-color: var(--success-100) !important;
    color: var(--success-800) !important;
    border: 1px solid var(--success-300) !important;
}

.alert-warning {
    background-color: var(--warning-100) !important;
    color: var(--warning-800) !important;
    border: 1px solid var(--warning-300) !important;
}

.alert-danger, .alert-error {
    background-color: var(--danger-100) !important;
    color: var(--danger-800) !important;
    border: 1px solid var(--danger-300) !important;
}

.alert-info {
    background-color: var(--info-100) !important;
    color: var(--info-800) !important;
    border: 1px solid var(--info-300) !important;
}

/* ========================================
   TEMA OSCURO DESHABILITADO
   - Comentado para forzar siempre tema claro
   ======================================== */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --text-primary:   #f9fafb;
        --text-secondary: #d1d5db;
        --text-tertiary:  #9ca3af;
        --bg-primary:     #1f2937;
        --bg-secondary:   #111827;
        --bg-tertiary:    #0f172a;
        --border-light:   #374151;
        --border-medium:  #4b5563;
    }
}
*/

/* ========================================
   NOTAS DE USO - ALTO CONTRASTE
   ========================================
   
   CONTRASTE WCAG AAA VERIFICADO:
   ✅ bg-white + text-primary (#1f2937) = 14:1
   ✅ bg-white + text-secondary (#374151) = 10:1
   ✅ primary-600 (#3b82f6) + white = 4.5:1
   ✅ secondary-600 (#8b5cf6) + white = 4.7:1
   ✅ success-500 + white = 4.6:1
   
   FONDOS SIEMPRE CLAROS:
   ✅ Blanco #ffffff
   ✅ Gris muy claro #f9fafb
   ✅ Gris claro #f3f4f6
   
   NUNCA USAR:
   ❌ Fondos negros (#000, #111, #1f2937)
   ❌ Texto claro sobre fondo claro
   ❌ gradient-dark
   ======================================== */