/* ============================================
   PALETA FEMENINA - OVERRIDE DE COLORES
   ============================================ */
:root {
    /* Colores Principales - Paleta Femenina */
    --primary-gradient: linear-gradient(135deg, #FF6B9D 0%, #C44569 100%) !important;
    --secondary-gradient: linear-gradient(135deg, #FFC0CB 0%, #FF6B9D 100%) !important;
    --success-gradient: linear-gradient(135deg, #9B59B6 0%, #318CE7 100%) !important;
    --expert-gradient: linear-gradient(135deg, #C44569 0%, #9B59B6 100%) !important;

    /* Colores de Fondo */
    --bg-dark: #1a0a1e !important;
    --bg-card: rgba(255, 192, 203, 0.05) !important;
    --bg-card-hover: rgba(255, 107, 157, 0.08) !important;
    --bg-glass: rgba(255, 192, 203, 0.1) !important;

    /* Colores de Texto */
    --text-primary: #ffffff !important;
    --text-secondary: #e8c4d8 !important;
    --text-muted: #b899a8 !important;

    /* Colores por Nivel */
    --level-beginner: #FFC0CB !important;
    --level-intermediate: #FF6B9D !important;
    --level-advanced: #9B59B6 !important;
    --level-expert: #C44569 !important;

    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(255, 107, 157, 0.1) !important;
    --shadow-md: 0 4px 16px rgba(255, 107, 157, 0.2) !important;
    --shadow-lg: 0 8px 32px rgba(255, 107, 157, 0.3) !important;
    --shadow-glow: 0 0 20px rgba(255, 107, 157, 0.4) !important;
}

/* Fondo animado con gradiente femenino */
body::before {
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 107, 157, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(196, 69, 105, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(155, 89, 182, 0.15) 0%, transparent 50%) !important;
}

/* Hero title gradient */
.hero h1 {
    background: linear-gradient(135deg, #ffffff 0%, #FF6B9D 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Stat numbers */
.stat-number {
    background: var(--primary-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Level cards borders */
.level-card.beginner::before {
    background: linear-gradient(90deg, #FFC0CB, #FF6B9D) !important;
}

.level-card.intermediate::before {
    background: linear-gradient(90deg, #FF6B9D, #C44569) !important;
}

.level-card.advanced::before {
    background: linear-gradient(90deg, #9B59B6, #318CE7) !important;
}

.level-card.expert::before {
    background: linear-gradient(90deg, #C44569, #9B59B6) !important;
}

/* Progress section */
.progress-section {
    background: linear-gradient(135deg, #FF6B9D 0%, #C44569 100%) !important;
}

/* Buttons and nav */
.filter-btn.active {
    background: var(--primary-gradient) !important;
}

.nav-btn {
    background: var(--primary-gradient) !important;
}

/* Copy button */
.copy-btn {
    background: rgba(255, 107, 157, 0.2) !important;
    border: 1px solid rgba(255, 107, 157, 0.3) !important;
    color: #FF6B9D !important;
}

.copy-btn:hover {
    background: rgba(255, 107, 157, 0.3) !important;
}

/* Info boxes */
.info-box {
    background: rgba(255, 192, 203, 0.1) !important;
    border-left: 4px solid #FFC0CB !important;
}

/* Total progress */
.total-percentage {
    background: linear-gradient(135deg, #FF6B9D 0%, #C44569 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.total-progress-fill {
    background: linear-gradient(90deg, #FF6B9D 0%, #C44569 100%) !important;
}

.stat-value {
    color: #FF6B9D !important;
}

.mini-progress-fill {
    background: linear-gradient(90deg, #FF6B9D 0%, #C44569 100%) !important;
}