/* ===============================================
   PALETA DE COLORES GLOBAL - MODO DARK
   =============================================== */

/* Variables globales para modo dark - PROFENINJA */
:root {
    /* PALETA BASE DARK MODE */
    --ninja-dark-bg-primary: #0f0f23;
    --ninja-dark-bg-secondary: #1a1a2e;
    --ninja-dark-bg-tertiary: #16213e;
    
    /* TEXTOS DARK MODE */
    --ninja-dark-text-primary: rgba(255, 255, 255, 0.95);      /* Títulos principales */
    --ninja-dark-text-secondary: rgba(255, 255, 255, 0.8);     /* Subtítulos */
    --ninja-dark-text-tertiary: rgba(255, 255, 255, 0.65);     /* Texto pequeño/labels */
    --ninja-dark-text-muted: rgba(255, 255, 255, 0.5);         /* Texto deshabilitado */
    --ninja-dark-text-placeholder: rgba(255, 255, 255, 0.4);   /* Placeholders */
    
    /* BOTONES DARK MODE */
    --ninja-dark-btn-primary-bg: rgba(59, 130, 246, 0.9);      /* Botón principal */
    --ninja-dark-btn-primary-hover: rgba(59, 130, 246, 1);     /* Hover principal */
    --ninja-dark-btn-secondary-bg: rgba(255, 255, 255, 0.1);   /* Botón secundario */
    --ninja-dark-btn-secondary-hover: rgba(255, 255, 255, 0.15); /* Hover secundario */
    --ninja-dark-btn-text: rgba(255, 255, 255, 0.95);          /* Texto de botones */
    --ninja-dark-btn-text-secondary: rgba(255, 255, 255, 0.8); /* Texto botones secundarios */
    
    /* SUPERFICIES DARK MODE */
    --ninja-dark-glass-bg: rgba(255, 255, 255, 0.08);          /* Fondo de vidrio */
    --ninja-dark-glass-bg-hover: rgba(255, 255, 255, 0.12);    /* Fondo vidrio hover */
    --ninja-dark-glass-border: rgba(255, 255, 255, 0.12);      /* Bordes de vidrio */
    --ninja-dark-glass-border-hover: rgba(255, 255, 255, 0.2); /* Bordes hover */
    --ninja-dark-card-bg: rgba(255, 255, 255, 0.05);           /* Fondo de tarjetas */
    --ninja-dark-input-bg: rgba(255, 255, 255, 0.1);           /* Fondo de inputs */
    --ninja-dark-input-border: rgba(255, 255, 255, 0.15);      /* Bordes de inputs */
    --ninja-dark-input-focus: rgba(59, 130, 246, 0.3);         /* Focus de inputs */
    
    /* ESTADOS Y FEEDBACK */
    --ninja-dark-success: #10b981;
    --ninja-dark-success-bg: rgba(16, 185, 129, 0.1);
    --ninja-dark-warning: #f59e0b;
    --ninja-dark-warning-bg: rgba(245, 158, 11, 0.1);
    --ninja-dark-danger: #ef4444;
    --ninja-dark-danger-bg: rgba(239, 68, 68, 0.1);
    --ninja-dark-info: #3b82f6;
    --ninja-dark-info-bg: rgba(59, 130, 246, 0.1);
    
    /* SOMBRAS Y EFECTOS */
    --ninja-dark-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --ninja-dark-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --ninja-dark-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.25);
    --ninja-dark-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);
    --ninja-dark-blur: blur(20px);
    --ninja-dark-blur-light: blur(10px);
    --ninja-dark-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --ninja-dark-transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* GRADIENTES DARK MODE */
    --ninja-dark-gradient-primary: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.8) 0%, 
        rgba(139, 92, 246, 0.8) 100%);
    --ninja-dark-gradient-secondary: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 100%);
    --ninja-dark-gradient-success: linear-gradient(135deg, 
        rgba(16, 185, 129, 0.8) 0%, 
        rgba(5, 150, 105, 0.8) 100%);
    --ninja-dark-gradient-warning: linear-gradient(135deg, 
        rgba(245, 158, 11, 0.8) 0%, 
        rgba(217, 119, 6, 0.8) 100%);
    --ninja-dark-gradient-danger: linear-gradient(135deg, 
        rgba(239, 68, 68, 0.8) 0%, 
        rgba(220, 38, 38, 0.8) 100%);
}

/* ===============================================
   CLASES UTILITARIAS DARK MODE
   =============================================== */

/* Aplicar automáticamente en modo dark */
body:not(.theme-light):not(.theme-rosa):not(.theme-neon) {
    /* Textos */
    --text-primary: var(--ninja-dark-text-primary);
    --text-secondary: var(--ninja-dark-text-secondary);
    --text-tertiary: var(--ninja-dark-text-tertiary);
    --text-muted: var(--ninja-dark-text-muted);
    
    /* Botones */
    --btn-primary-bg: var(--ninja-dark-btn-primary-bg);
    --btn-primary-hover: var(--ninja-dark-btn-primary-hover);
    --btn-secondary-bg: var(--ninja-dark-btn-secondary-bg);
    --btn-secondary-hover: var(--ninja-dark-btn-secondary-hover);
    --btn-text: var(--ninja-dark-btn-text);
    
    /* Superficies */
    --glass-bg: var(--ninja-dark-glass-bg);
    --glass-border: var(--ninja-dark-glass-border);
    --card-bg: var(--ninja-dark-card-bg);
    --input-bg: var(--ninja-dark-input-bg);
    
    /* Efectos */
    --shadow-sm: var(--ninja-dark-shadow-sm);
    --shadow-md: var(--ninja-dark-shadow-md);
    --shadow-lg: var(--ninja-dark-shadow-lg);
    --blur-effect: var(--ninja-dark-blur);
    --transition: var(--ninja-dark-transition);
}

/* Clases específicas para componentes */
.ninja-title {
    color: var(--ninja-dark-text-primary);
    font-weight: 700;
}

.ninja-subtitle {
    color: var(--ninja-dark-text-secondary);
    font-weight: 600;
}

.ninja-text {
    color: var(--ninja-dark-text-tertiary);
    font-weight: 500;
}

.ninja-text-small {
    color: var(--ninja-dark-text-tertiary);
    font-weight: 400;
    font-size: 0.875rem;
}

.ninja-btn-primary {
    background: var(--ninja-dark-btn-primary-bg);
    color: var(--ninja-dark-btn-text);
    border: 1px solid var(--ninja-dark-glass-border);
    transition: var(--ninja-dark-transition);
    box-shadow: var(--ninja-dark-shadow-sm);
}

.ninja-btn-primary:hover {
    background: var(--ninja-dark-btn-primary-hover);
    box-shadow: var(--ninja-dark-shadow-md);
}

.ninja-btn-secondary {
    background: var(--ninja-dark-btn-secondary-bg);
    color: var(--ninja-dark-btn-text);
    border: 1px solid var(--ninja-dark-glass-border);
    transition: var(--ninja-dark-transition);
    box-shadow: var(--ninja-dark-shadow-sm);
}

.ninja-btn-secondary:hover {
    background: var(--ninja-dark-btn-secondary-hover);
    box-shadow: var(--ninja-dark-shadow-md);
}

.ninja-glass-panel {
    background: var(--ninja-dark-glass-bg);
    backdrop-filter: var(--ninja-dark-blur);
    border: 1px solid var(--ninja-dark-glass-border);
    box-shadow: var(--ninja-dark-shadow-lg);
}

.ninja-input {
    background: var(--ninja-dark-input-bg);
    color: var(--ninja-dark-text-primary);
    border: 1px solid var(--ninja-dark-input-border);
    transition: var(--ninja-dark-transition);
}

.ninja-input:focus {
    border-color: var(--ninja-dark-btn-primary-bg);
    box-shadow: 0 0 0 3px var(--ninja-dark-input-focus);
}

.ninja-input::placeholder {
    color: var(--ninja-dark-text-placeholder);
}