/* ============================================
   PALETA DE COLORES PROFESIONAL MODERNA
   Colores suaves y sofisticados para una apariencia más profesional
   ============================================ */

:root {
    /* Opción 1: Azul Profesional Suave (Recomendado) */
    --primary-color: #4A90E2; /* Azul corporativo suave */
    --primary-dark: #357ABD; /* Azul más oscuro para hover */
    --primary-light: #6BA3E8; /* Azul claro */
    --primary-lighter: #8BB5ED; /* Azul muy claro */
    --primary-gradient: linear-gradient(135deg, #4A90E2 0%, #5BA0F2 100%);
    --primary-gradient-soft: linear-gradient(135deg, #6BA3E8 0%, #7BB3F8 100%);
    
    /* Opción 2: Verde Esmeralda Profesional (Alternativa) */
    /* 
    --primary-color: #2D8659;
    --primary-dark: #1F5F3F;
    --primary-light: #3FA372;
    --primary-lighter: #5FC08A;
    --primary-gradient: linear-gradient(135deg, #2D8659 0%, #3FA372 100%);
    --primary-gradient-soft: linear-gradient(135deg, #3FA372 0%, #5FC08A 100%);
    */
    
    /* Opción 3: Púrpura Sofisticado (Alternativa) */
    /*
    --primary-color: #6B5B95;
    --primary-dark: #4A3F6B;
    --primary-light: #8B7BAF;
    --primary-lighter: #A99BC9;
    --primary-gradient: linear-gradient(135deg, #6B5B95 0%, #8B7BAF 100%);
    --primary-gradient-soft: linear-gradient(135deg, #8B7BAF 0%, #A99BC9 100%);
    */
    
    /* Colores para badges de cupones - Más suaves y profesionales */
    --badge-primary: #4A90E2; /* Azul suave para cupones destacados */
    --badge-success: #27AE60; /* Verde suave para ofertas especiales */
    --badge-warning: #F39C12; /* Naranja suave para ofertas limitadas */
    --badge-danger: #E74C3C; /* Rojo suave (más oscuro que el actual) */
    --badge-info: #3498DB; /* Azul claro para información */
    
    /* Colores de estado mejorados */
    --success-color: #27AE60; /* Verde más suave */
    --success-light: #52BE80;
    --warning-color: #F39C12; /* Naranja en lugar de amarillo brillante */
    --warning-light: #F5B041;
    --danger-color: #E74C3C; /* Rojo más oscuro y profesional */
    --danger-light: #EC7063;
    --info-color: #3498DB; /* Azul información */
    --info-light: #5DADE2;
    
    /* Colores neutros mejorados */
    --light-color: #F8F9FA;
    --light-gray: #E9ECEF;
    --gray: #DEE2E6;
    --dark-gray: #6C757D;
    --dark-color: #212529;
    --darker-color: #1A1D20;
    
    /* Colores de fondo */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-dark: #212529;
}

/* Clases personalizadas para badges de cupones */
.badge-coupon-primary {
    background-color: var(--badge-primary) !important;
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(74, 144, 226, 0.2);
}

.badge-coupon-success {
    background-color: var(--badge-success) !important;
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(39, 174, 96, 0.2);
}

.badge-coupon-warning {
    background-color: var(--badge-warning) !important;
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(243, 156, 18, 0.2);
}

.badge-coupon-danger {
    background-color: var(--badge-danger) !important;
    color: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.2);
}

/* Override de Bootstrap para colores más suaves - Mismo tono del logo */
.bg-primary {
    background-color: var(--primary-color) !important;
    background: var(--primary-color) !important;
}

/* Asegurar que todos los elementos con bg-primary usen el color del logo */
.btn-primary,
.bg-primary,
.text-primary {
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: 74, 144, 226;
}

.bg-danger {
    background-color: var(--badge-danger) !important;
}

.bg-success {
    background-color: var(--badge-success) !important;
}

.bg-warning {
    background-color: var(--badge-warning) !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

.text-danger {
    color: var(--badge-danger) !important;
}

.text-success {
    color: var(--badge-success) !important;
}

.text-warning {
    color: var(--badge-warning) !important;
}

/* Mejoras para los badges en las tarjetas de cupones */
.cupon-badge {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Estilos para diferentes tipos de descuento */
.badge-descuento-porcentaje {
    background: linear-gradient(135deg, #4A90E2 0%, #5BA0F2 100%) !important;
}

.badge-descuento-monto {
    background: linear-gradient(135deg, #27AE60 0%, #52BE80 100%) !important;
}

.badge-descuento-especial {
    background: linear-gradient(135deg, #6B5B95 0%, #8B7BAF 100%) !important;
}

.badge-descuento-2x1 {
    background: linear-gradient(135deg, #E74C3C 0%, #EC7063 100%) !important;
}

.badge-descuento-envio {
    background: linear-gradient(135deg, #3498DB 0%, #5DADE2 100%) !important;
}