.level-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    width: 140px;
}

.level-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--secondary);
    text-shadow: 0 0 5px rgba(96, 165, 250, 0.5);
    white-space: nowrap;
}

.progress-bar-track {
    flex-grow: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4ade80, #3b82f6);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.7);
    transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px;
}

/* Colores de Progreso de Niveles Superiores */
.level-text.purple { color: #c084fc; text-shadow: 0 0 5px rgba(192, 132, 252, 0.5); }
.progress-bar-fill.purple {
    background: linear-gradient(90deg, #a855f7, #ec4899);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.7);
}

.level-text.gold { color: #facc15; text-shadow: 0 0 5px rgba(250, 204, 21, 0.5); }
.progress-bar-fill.gold {
    background: linear-gradient(90deg, #eab308, #f59e0b);
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.7);
}

.level-text.red { color: #f87171; text-shadow: 0 0 5px rgba(248, 113, 113, 0.5); }
.progress-bar-fill.red {
    background: linear-gradient(90deg, #ef4444, #b91c1c);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
}