/* ===================================
   VARIABLES DE COLORES - CrmWaPro
   Sistema de diseño con glassmorphism
   =================================== */

:root {
    /* ============================================
       FONDOS - Sistema de capas oscuras
       ============================================ */
    --color-bg-primary: #000000;              /* Fondo principal negro puro */
    --color-bg-card: rgba(255, 255, 255, 0.05); /* Tarjetas glassmorphism - translúcidas */
    --color-bg-card-hover: rgba(255, 255, 255, 0.08); /* Hover sobre tarjetas */
    
    /* ============================================
       BORDES - Sutiles con transparencia
       ============================================ */
    --color-border-primary: rgba(255, 255, 255, 0.1); /* Bordes principales */
    --color-border-hover: rgba(255, 255, 255, 0.2);   /* Bordes en hover */
    
    /* ============================================
       TEXTOS - Alta legibilidad sobre fondo oscuro
       ============================================ */
    --color-text-primary: #ffffff;    /* Texto principal - blanco puro */
    --color-text-secondary: #9ca3af;  /* Texto secundario - gris medio */
    --color-text-muted: #6b7280;      /* Texto tenue - gris oscuro */
    
    /* ============================================
       GRADIENTES - Vibrantes para elementos destacados
       ============================================ */
    /* Gradiente principal: Violeta a Rosa */
    --gradient-primary-start: #8b5cf6;  /* Violeta vibrante */
    --gradient-primary-end: #ec4899;    /* Rosa fucsia */
    --gradient-primary: linear-gradient(135deg, var(--gradient-primary-start) 0%, var(--gradient-primary-end) 100%);
    
    /* Gradiente secundario: Verde a Azul */
    --gradient-secondary-start: #10b981; /* Verde esmeralda */
    --gradient-secondary-end: #3b82f6;   /* Azul brillante */
    --gradient-secondary: linear-gradient(135deg, var(--gradient-secondary-start) 0%, var(--gradient-secondary-end) 100%);
    
    /* ============================================
       ESTADOS - Feedback visual del sistema
       ============================================ */
    --color-success: #10b981;     /* Verde - Activo/Completado */
    --color-success-hover: #059669; /* Verde oscuro - Hover */
    --color-success-glow: rgba(16, 185, 129, 0.3); /* Efecto glow verde */
    
    --color-error: #ef4444;       /* Rojo - Inactivo/Error */
    --color-error-hover: #dc2626; /* Rojo oscuro - Hover */
    --color-error-glow: rgba(239, 68, 68, 0.3); /* Efecto glow rojo */
    
    --color-warning: #f59e0b;     /* Naranja - Pendiente/Advertencia */
    --color-warning-hover: #d97706; /* Naranja oscuro - Hover */
    --color-warning-glow: rgba(245, 158, 11, 0.3); /* Efecto glow naranja */
    
    /* ============================================
       EFECTOS - Glassmorphism y blur
       ============================================ */
    --blur-sm: blur(8px);         /* Blur pequeño para cards */
    --blur-md: blur(12px);        /* Blur mediano para overlays */
    --blur-lg: blur(20px);        /* Blur grande para modales */
    
    /* Sombras con colores del tema */
    --shadow-primary: 0 8px 32px rgba(139, 92, 246, 0.2);
    --shadow-success: 0 8px 32px var(--color-success-glow);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ============================================
   CLASES UTILITARIAS - Aplicación rápida
   ============================================ */

/* Efecto glassmorphism para tarjetas */
.glass-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-primary);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
}

.glass-card:hover {
    background: var(--color-bg-card-hover);
    border-color: var(--color-border-hover);
}

/* Gradiente de texto animado */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
}

/* Botones con gradiente */
.btn-gradient-primary {
    background: var(--gradient-primary);
    color: white;
    border: none;
}

.btn-gradient-secondary {
    background: var(--gradient-secondary);
    color: white;
    border: none;
}

/* Estados visuales para feedback */
.state-success {
    background-color: var(--color-success);
    box-shadow: var(--shadow-success);
}

.state-error {
    background-color: var(--color-error);
}

.state-warning {
    background-color: var(--color-warning);
}